<template>
  <a-modal
    :maskClosable="false"
    title="添加业务域名"
    centered
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <p>
      请先<a :href="baseUrl + api.downLoadVerifFile">下载校验文件</a
      >，并将文件放置在域名根目录下，例如wx.qq.com，并确保可以访问该文件
    </p>
    <a-form-model ref="ruleForm" :model="form">
      <a-form-model-item
        v-for="(item, index) in form.webviewdomain"
        :key="index"
        :prop="'webviewdomain.' + index + '.domain'"
        :rules="{
          required: true,
          validator: (rule, value, callback) => {
            if (!value) {
              callback('请输入业务域名')
            } else if (!validateText(value)) {
              callback('域名格式只支持英文大小写字母、数字及-.，不支持IP地址')
            } else {
              callback()
            }
          },
          trigger: 'change',
        }"
      >
        <a-input v-model="item.domain" addon-before="https://" placeholder="例：wx.qq.com" />
      </a-form-model-item>
    </a-form-model>
    <a-button type="primary" @click="handleAdd">添加</a-button>
  </a-modal>
</template>
<script>
import api, { DomainAction, DownLoadVerifFile } from '@/api/system/system'
export default {
  name: 'DictModal',
  props: {},
  components: {},
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      form: {
        webviewdomain: [],
      },
      baseUrl: process.env.VUE_APP_MODEL_BASE_URL,
      tenantId: localStorage.getItem('tenantId'),
      api,
    }
  },
  beforeCreate() {},
  created() {},
  methods: {
    show() {
      this.form.webviewdomain = []
      this.visible = true
    },
    async handleDownLoad() {
      await DownLoadVerifFile()
    },
    handleAdd() {
      this.form.webviewdomain.push({
        domain: undefined,
      })
    },
    validateText(val) {
      let text = /^[a-zA-Z0-9-.]*$/g
      return text.test(val)
    },
    handleSubmit(e) {
      e.preventDefault()
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          try {
            this.confirmLoading = true
            let { code, msg } = await DomainAction({
              action: 'add', //action=add 添加操作
              webviewdomain: this.form.webviewdomain.map((item) => item.domain && 'https://' + item.domain),
            })
            this.confirmLoading = false
            this.$message[code === 0 ? 'success' : 'error'](msg)
            if (code === 0) {
              this.visible = false
              this.$emit('reload')
            }
          } catch (error) {
            this.confirmLoading = false
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>
